<!--
 * @Author: yangzr 1076420747@qq.com
 * @Date: 2022-09-26 18:01:22
 * @LastEditors: yangzr 1076420747@qq.com
 * @LastEditTime: 2022-12-26 10:59:21
 * @FilePath: \ktgj-crm\src\views\flight\overdueTicket.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="overdueTicket">
    <el-form
      :model="selectData"
      label-width="100px"
      inline
      class="demo-ruleForm"
      style="margin: 15px"
    >
      <el-form-item label="pnr" prop="name">
        <el-input v-model="selectDate.pnr" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="乘客姓名" prop="name">
        <el-input v-model="selectDate.guestName" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="订单号" prop="name">
        <el-input v-model="selectDate.field_9" size="mini"></el-input>
      </el-form-item>

      <el-form-item label="出票时间" prop="name">
        <el-date-picker
          class="inputClass"
          :value-format="format"
          size="mini"
          v-model="selectDate.outTicketTime"
          type="date"
          placeholder="选择日期"
          clearable
        >
        </el-date-picker
        >--
        <el-date-picker
        clearable
          class="inputClass"
          :value-format="format"
          size="mini"
          v-model="selectDate.outTicketTimeEnd"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="B单状态" prop="name">
        <el-select v-model="selectDate.status" placeholder="请选择活动区域" size="mini" clearable>
          <el-option label="待黑屏" value="待黑屏"></el-option>
          <el-option label="退废完成" value="退废完成"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生成B单时间" prop="name">
        <el-date-picker
        clearable
          class="inputClass"
          :value-format="format"
          size="mini"
          v-model="selectDate.generateBBillTime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker
        >--
        <el-date-picker
         clearable
          class="inputClass"
          :value-format="format"
          size="mini"
          v-model="selectDate.generateBBillTimeEnd"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="选择合作商" prop="name" v-model="selectDate.a">
        <el-select
        clearable
          v-model="selectDate.partners"
          placeholder="请选择"
          size="mini"
        >
          <el-option label="北京分公司" value="北京分公司"></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="终止合作商" prop="name">
        <el-select v-model="selectDate.a" placeholder="请选择" size="mini">
          <el-option
            
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          size="mini"
          @click="getflightOverdueTicketList()"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table
      style="margin: 10px"
      class="tableClass"
      :data="tableData"
      :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }"
      size="mini"
      border
    >
      <el-table-column prop="orderId" label="订单号"> </el-table-column>
      <el-table-column prop="pnr" label="PNR"> </el-table-column>
      <el-table-column prop="guestName" label="未乘机人名称"></el-table-column>
      <el-table-column prop="departureTime" label="起飞时间"></el-table-column>
      <el-table-column prop="ticketNo" label="票号"></el-table-column>
      <el-table-column
        prop="ticketNoInvalidTime"
        label="距离票号失效时间还剩"
        width="180"
      ></el-table-column>
      <el-table-column prop="flightRoute" label="航程"></el-table-column>
      <el-table-column prop="flight" label="航班"></el-table-column>
      <el-table-column
        prop="ticketingPartner"
        label="出票合作商"
      ></el-table-column>
      <el-table-column prop="refundStatus" label="退票状态"></el-table-column>
      <el-table-column
        prop="generateBBillTime"
        label="生成B单时间"
      ></el-table-column>
      <el-table-column
        prop="noticeGuestStatus"
        label="通知客人状态"
      ></el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "overdueTicket",

  data() {
    return {
      format: "yyyy-MM-dd",
      // 查询数据
      selectDate: {
        pnr: "",
        guestName: "",
        field_9: "",
        outTicketTime: "",
        outTicketTimeEnd: "",
        status: "",
        generateBBillTime: "",
        generateBBillTimeEnd: "",
        partners: "",
        endPartners: "",
      },
      // 表格数据
      tableData: [],
      //
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
      ],
      // 分页
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,
    };
  },
  watch: {},
  methods: {
    // 列表
    getflightOverdueTicketList() {
      this.$axios
        .getflightOverdueTicketList({
          pnr: this.selectDate.pnr,
          guestName: this.selectDate.guestName,
          orderId: this.selectDate.field_9,
          outTicketTime: this.selectDate.outTicketTime,
          outTicketTimeEnd: this.selectDate.outTicketTimeEnd,
          status: this.selectDate.status,
          generateBBillTime: this.selectDate.generateBBillTime,
          generateBBillTimeEnd: this.selectDate.generateBBillTimeEnd,
          partners: this.selectDate.partners,
          endPartners: this.selectDate.endPartners,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "200") {
            this.tableData = res.data;
            this.pageTotal = res.total;
          }
        });
    },
    //分页
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.getflightOverdueTicketList();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      console.log("2", value);

      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.getflightOverdueTicketList();
      // orders = res.data;
    },
    search() {
      localStorage.setItem("pageNum", this.currentPage);
      localStorage.setItem("pageSize", 10);
      this.getflightOverdueTicketList();
    },
  },
  mounted() {
      localStorage.setItem("pageSize", 10);
                localStorage.setItem("pageNum", 1);
    this.getflightOverdueTicketList();
  },
};
</script>

<style  scoped>
</style>
